<template>
  <BorderBox10 class="w-full h-full">
    <div class="p-6">
      <Title :title="`服务站数量排行(Top10)`"></Title>
      <div class="w-full box-border">
        <div class="w-full h-full py-4 px-12 box-border">
          <div class="w-full grid grid-cols-6 h-4 py-4 text-left">
            <p class="text-[#00FFFF]">排名</p>
            <p class="text-[#00FFFF] col-span-4">服务中心名称</p>
            <p class="text-[#00FFFF]">数量</p>
          
          </div>
          <div class="w-full overflow-y-auto" style="max-height:auto">
            <div
              v-for="(item, index) in illList.slice(0,10)"
              :key="index"
              class="grid grid-cols-6 w-full text-slate-300 h-full leading-8 text-left listli"
              @click="showUser(item.IDs)"
             
            >
              <p>{{ index + 1 }}</p>
              <p class="col-span-4">{{ item.name }}</p>
              <p >{{ item.value }}</p>
            
            </div>
          </div>
        </div>
      </div>
    </div>
  </BorderBox10>
  <el-dialog
    v-model="detailShow"
    style="width: 90%; min-width: 800px;margin-top:1vh"
    lock-scroll
    :before-close="closeDetailShow"
    title="名单"
    destroy-on-close
  >
    <div class="gva-table-box">
      <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        :data="tableDataMD"
        row-key="ID"
      >
       <el-table-column align="center" label="服务站id" prop="id" width="150">
        </el-table-column>
        <el-table-column align="center" label="服务站名称" prop="name" width="300">
        </el-table-column>
       
        
        <el-table-column align="center" label="电话" prop="phone">
        </el-table-column>
        <el-table-column align="center" label="管理人" prop="nick_name">
        </el-table-column>
        这个
        <el-table-column align="center" label="服务中心" prop="serviceCenter">
        </el-table-column>
        <el-table-column align="center" label="省 " prop="province">
        </el-table-column>
        <el-table-column align="center" label="市" prop="city">
        </el-table-column>
        <el-table-column align="center" label="区" prop="area">
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageMD"
          :page-size="pageSizeMD"
          :page-sizes="[10]"
          :total="totalMD"
          @current-change="handleCurrentChangeMD"
          @size-change="handleSizeChangeMD"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { BorderBox10 } from '@kjgl77/datav-vue3'
import { defineProps } from 'vue'
import { ref, reactive } from "vue";
import Title from '@/view/memberManager/components/title.vue'
import {useRouter} from "vue-router";
import { getDiseaseUserList } from "@/api/disease";
import {getServiceStationRank,getServiceStationListByIDs} from '@/api/dataAnalysis'
const router = useRouter()
const tableDataMD = ref([]);
const pageMD = ref(1);
const totalMD = ref(0);
const pageSizeMD = ref(10);
const CardRow=ref([])
// 查看详情控制标记
const detailShow = ref(false);
const illList=ref([])
const GetFWZList= async()=>{
  const res =await getServiceStationRank()
  if(res.code==0){
    illList.value=res.data
  }
}
GetFWZList()
// 关闭详情弹窗
const closeDetailShow = () => {
  detailShow.value = false;
  pageMD.value=1;
  pageSizeMD.value=10;
};
const showUser =async (users) => {
  CardRow.value=users
  const res = await getServiceStationListByIDs({
    uids: users,
    page: pageMD.value,
    pageSize: pageSizeMD.value,
  });
  if (res.code === 0) {
    detailShow.value = true;
    tableDataMD.value = res.data.list;
    pageMD.value = res.data.page;
    pageSizeMD.value = res.data.pageSize;
    totalMD.value = res.data.total;
  }
}
// 弹窗表格分页
const handleSizeChangeMD = (val) => {
  pageSizeMD.value = val;
  showUser(CardRow.value);
};

// 弹窗表格修改页面容量
const handleCurrentChangeMD = (val) => {
  pageMD.value = val;
  showUser(CardRow.value);
};

</script>
<style scoped>
.lists {
  border-bottom: 1px solid #53749c;
}
.listli{
  cursor: pointer;
}
.listli>p:hover{
  color: #ccc !important;
}
</style>
